<template>
  <div class="login">
    <div class="content">
      <img
        src="https://img.zcool.cn/community/0193dc5b9a0366a8012099c8281b5d.jpg@1280w_1l_2o_100sh.jpg"
        alt=""
        class="logo"
      />
      <h3>猴小报信息管理系统</h3>
      <p>Maintain information Relationship Management</p >
      <div class="logo_form">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          size="large"
        >
          <el-form-item prop="name">
            <img
              src="https://img.tukuppt.com/png_preview/00/06/06/ZnMgajOiqY.jpg!/fw/780"
              alt=""
              class="login_username left_msg_img"
            />
            <el-input
              v-model="ruleForm.name"
              autocomplete="off"
              placeholder="请输入用户名称"
              :clearable="true"
            />
          </el-form-item>
          <el-form-item prop="password">
            <img
              src="https://tse1-mm.cn.bing.net/th/id/OIP-C.AcSkSBfTDVejH1EIFos5SwHaHa?w=169&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt=""
              class="login_password left_msg_img"
            />
            <el-input
              v-model="ruleForm.password"
              type="password"
              autocomplete="off"
              placeholder="请输入登录密码"
              :show-password="true"
            />
          </el-form-item>
          <div class="huakuai">
            <Huakuai @statusChange="change_succeed" />
          </div>
          <div class="password_msg">
            <div class="remember_password">
              <el-checkbox v-model="remember_password" size="large" />
              <div>
                <span class="remember_password_span">记住密码</span>
              </div>
            </div>
             <a href="http://info.maintain.bailingkeji.com/forgot" >忘记密码</a>
          </div>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit_login"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">CopyRight @ 优品汇 2015 - 2017</div>
  </div>
</template>

<script setup lang="ts">
import Cookies from 'js-cookie'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
// import { ElMessage } from 'element-plus'
import Huakuai from '@/components/huakuai.vue'
import { login } from '@/request/api/login.ts'
import { userInforStore } from '@/stores/user'
const store = userInforStore()
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
// 记住密码的开关
let remember_password = ref(false)
// 成功开关
let is_change_succeed = ref(false)
// 滑块认证成功
function change_succeed(bold: boolean) {
  is_change_succeed.value = bold
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入用户名称'))
  } else {
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入登录密码'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  name: localStorage.getItem('use_name') || '',
  password: localStorage.getItem('use_password') || ''
})

const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ validator: validatePass, trigger: 'blur' }],
  password: [{ validator: validatePass2, trigger: 'blur' }]
})
import Task from '@/views/home/task.vue'
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      if (!is_change_succeed.value) {
        ElMessage.error('请滑动滑块')
        return
      } else {
        let params = {
          account: ruleForm.name,
          password: ruleForm.password
        }
        let data: any = await login(params)
        console.log(data, 'data')
        if (data.code == 200) {
          if (remember_password.value) {
            localStorage.setItem('remember_password', "true")
            localStorage.setItem('use_name', ruleForm.name)
            localStorage.setItem('use_password', ruleForm.password)
          }else{
            localStorage.removeItem('remember_password')
            localStorage.removeItem('use_name')
            localStorage.removeItem('use_password')
          }
          store.menu = [{path:"/index",permission_name:"首页",children:[]},...data.data.menuInfo]
          store.user_data = data.data
          store.access_token = data.data.token
          Cookies.set('access_token', data.data.token)
          router.push('/')
        } else {
          ElMessage.error(data.message)
        }
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
onMounted(()=>{
  remember_password.value = Boolean(localStorage.getItem('remember_password')) || false
})
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/img/login/bg.png') no-repeat;
  background-size: 100% 100%;
  @include flex_cc();
  position: relative;
  .content {
    width: 400px;
    height: 550px;
    padding: 20px 50px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 5px;
    .logo {
      width: 100px;
      // height: 100px;
    }

    h3 {
      @include font(#0079fe, 30, 42);
      font-weight: 650;
      margin-top: 20px;
      font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
      letter-spacing: 2px;
    }

    p {
      @include font(#0079fe, 14, 42);
      font-weight: 400;
    }
    .logo_form {
      margin-top: 20px;
    }
    .submit_login {
      width: 100%;
    }
    .huakuai {
      width: 100%;
      height: 40px;
      overflow: hidden;
    }
    .password_msg {
      // margin: 10px 0;
      @include flex_sc();
      .remember_password {
        display: flex;
        .remember_password_span {
          display: inline-block;
          @include font(#333, 12, 40);
          margin-left: 5px;
        }
      }
      .forgot_password {
        @include font(#409eff, 13, 40);
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 40px;
    font-size: 11px;
    color: rgb(204, 204, 204);
  }
}
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}
:deep(.el-form-item__content) {
  position: relative;
  .left_msg_img {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .el-input__inner {
    padding-left: 30px;
  }
}
</style>